<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .right {
            color: green;
            font-size: 12px;
        }

        .error {
            color: red;
            font-size: 12px;
        }
    </style>
    <script>
        function $(id) {
            return document.getElementById(id);
        }

        

        //用户名由可以是数字、字母、下划线、点、横线、中文字符组成，只能由数字或者字母开头和结尾，长度为5-12位
        function checkUserName() {
            var username = $("username").value;//获取文本框的值


            var reg = /^[0-9a-z][\u4E00-\u9FA5\w.-]{3,10}[0-9a-z]$/i;
            if (reg.test(username)) {
                $("usernameInfo").innerHTML = "ok";
                $("usernameInfo").className = "right";
                return true;
            } else {
                $("usernameInfo").innerHTML = "用户名由可以是数字、字母、下划线、点、横线、中文字符组成，只能由数字或者字母开头和结尾，长度为5-12位";
                $("usernameInfo").className = "error";
                return false;
            }
        }

        //密码可以由数字、字母组成(可以是纯数字或者纯字母或者数字字母结合)6-10位
        function checkPassword() {
            var password = $("password").value;//获取文本框的值

            var reg = /^[a-z0-9]{6,10}$/i;

            if (reg.test(password)) {
                $("passwordInfo").innerHTML = "ok";
                $("passwordInfo").className = "right";
                return true;
            } else {
                $("passwordInfo").innerHTML = "密码是由数字、字母组成";
                $("passwordInfo").className = "error";
                return false;
            }
        }


        // 确认密码(确认两次密码是否一致)
        function checkRepassword() {
            var password = $("password").value;//获取密码框的值
            var repassword = $("repassword").value;//获取再次输入密码框的值
            var reg = /^[a-z0-9]{6,10}$/i;
            if (repassword != "" && reg.test(repassword)) {
                
                if (password == repassword) {
                    $("repasswordInfo").innerHTML = "ok";
                    $("repasswordInfo").className = "right";
                    return true;
                } else {
                    $("repasswordInfo").innerHTML = "两次密码输入不一致";
                    $("repasswordInfo").className = "error";
                    return false;
                }
            } else {
                $("repasswordInfo").innerHTML = "密码未填或者格式不对";
                $("repasswordInfo").className = "error";
                return false;
            }

        }


        // 手机号以1开头，一共11位
        function checkPhone() {
            var phone = $("phone").value;//获取文本框的值

            var reg = /^1\d{10}$/;

            if (reg.test(phone)) {
                $("phoneInfo").innerHTML = "ok";
                $("phoneInfo").className = "right";
                return true;
            } else {
                $("phoneInfo").innerHTML = "手机号以1开头，一共11位";
                $("phoneInfo").className = "error";
                return false;
            }
        }

        function checkAll(){
            var res=checkUserName()&&checkPassword()&&checkRepassword()&&checkPhone();
            return res;
        }
    </script>
</head>

<body>
    <form action="success.html" onsubmit="return checkAll()">
        <table>
            <tbody>
                <tr>
                    <td>用户名</td>
                    <td>
                        <input type="text" id="username"  name="username" onblur="checkUserName()">
                        <span id="usernameInfo"></span>
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                        <input type="text" id="password"  name="password" onblur="checkPassword()">
                        <span id="passwordInfo"></span>
                    </td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td>
                        <input type="text" id="repassword"  name="repassword" onblur="checkRepassword()">
                        <span id="repasswordInfo"></span>
                    </td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td>
                        <input type="text" id="phone" name="phone"  onblur="checkPhone()">
                        <span id="phoneInfo"></span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="提交">
                    </td>
                   
                </tr>
            </tbody>
        </table>
    </form>
</body>

</html>